<template>
	<view>
		<view class="cart-item">
			<view class="un-image">
				<image  :src="img+goods.THUMB" ></image>
				<text class="un-shouqing" v-if="goods.SALESTOCK===0">已售罄</text>
			</view>
			
			<view class="item-right">
				<text class="clamp title">{{goods.NAME}}</text>
				<text class="clamp attr">{{goods.GOODSSPEC}}</text>
				<text class="price">¥{{goods.SALEPRICE}}</text>
			</view>
		</view>
		<view class="un-similarity-text">相似好货 为你推荐</view>
		<view v-if="goodsList.length===0" style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无相似商品</view>

		<view v-else class="guess-section">
			<view  v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="img+item.THUMB" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.NAME}}</text>
				<text class="tit2 title2 clamp">{{item.SHORTINFO}}</text>
				<text class="price">￥{{item.PRICE1}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId:"",
				goods:{},
				goodsList: [],
				img:''
			}
		},
		onLoad(options) {
			this.goodsId=options.goodsId;
			this.img = getApp().globalData.imageAddress;
			this.loadData(this.goodsId);
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async loadData(id){
				/* let goodsList = await this.$api.json('goodsList');
				this.goodsList = goodsList || []; */
				
				this.$http.post("/goods/detail",{
					SIGNATURE:uni.getStorageSync("SIGNATURE"),
					GOODSID:id,
				}).then(res=>{
					if(res.data.STATE==='0' && res.statusCode===200){
						
						this.goods=res.data.OBJECT;
						this.goods.GOODSSPEC=this.goods.SPEC[0].GOODSSPEC;
						this.goods.SALESTOCK=this.goods.SPEC[0].SALESTOCK;
						this.goods.SALEPRICE=this.goods.SPEC[0].SALEPRICE;
					}
				}).catch(err=>{
					console.log('request fail',err);
				})
				this.$http.post("/goods/findOtherGoodsSamecate",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					GOODSID : id,
					PAGE:1,
				}).then((res) => {
					this.goodsList=res.data.OBJECT;
				}).catch((err)=>{
					console.log('request fail', err);
				})
			}, 
			//商品详情页
			navToDetailPage(item) {
				let id = item.ID;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.cart-item{
		background: #fff;
		display:flex;
		position:relative;
		padding:18upx 55upx;
		.un-image{
			background-color: #fff;
			width: 160upx;
			height: 160upx;
			position:relative;
			image{
				border-radius:8upx;
				width: 100%;
				height:100%;
			}
			.un-shouqing{
				position: absolute;
				z-index: 5;
				width: 100%;
				height: 30upx;
				border: 0upx solid #666666;
				background-color: #666666;
				color: #fff;
				font-size: 24upx;
				left: 0upx;
				top: 120upx;
				text-align: center;
			}
		}
		.item-right{
			padding-left: 30upx;
			.title,.price{
				margin-top: 20upx;
				font-size:25upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 30upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.attr{
				font-size: 25upx;
				color: $font-color-light;
				height: 40upx;
				line-height: 40upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.price{
				font-size: 25upx;
				height: 40upx;
				line-height:40upx;
				color: #F76260;
			}
		}
	}
	
	.un-similarity-text{
		text-align: center;
		font-size: 25upx;
		color: #999999;
		padding: 50upx;
	}
	
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 50upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 45%;
			padding-top: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			margin-left: 85upx;
			width: 160upx;
			height: 160upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			margin-left: 40upx;
			font-size: $font-sm+1upx;
			color: $font-color-dark;
			line-height: 60upx;
			text-align: center;
		}
		.price{
			margin-left: 115upx;
			font-size: $font-sm;
			color: $uni-color-primary;
			line-height: 1;
			line-height: 50upx;
		}
		.tit2{
			margin-left: 40upx;
			font-size: $font-sm;
			color: $font-color-light;
			line-height: 30upx;
			text-align: center;
		}
	}
</style>
